<template>
	<view class="location-picker-enhanced">
		<!-- 搜索区域 -->
		<view class="search-section">
			<view class="search-inputs">
				<view class="input-group">
					<view class="input-field" :class="{ active: currentStep === 'city' }" @click="switchToCityStep">
						<input
							v-if="currentStep === 'city'"
							v-model="manualCity"
							class="city-input"
							placeholder="请选择市县"
							@input="handleManualCityInput"
							@focus="handleCityFocus"
							@blur="handleCityBlur"
							@confirm="confirmManualCity"
						/>
						<text v-else class="input-label" :style="{ color: selectedCity ? '#0B1F20' : '#999999' }">{{ selectedCity || '请选择市县' }}</text>
					</view>
					<view class="input-field" :class="{ active: currentStep === 'address' }" @click="switchToAddressStep">
						<input
							v-if="currentStep === 'address'"
							v-model="manualAddress"
							class="address-input"
							placeholder="请输入出发地(详细地址)"
							@input="handleManualInput"
							@focus="handleAddressFocus"
							@blur="handleAddressBlur"
							@confirm="confirmManualAddress"
						/>
						<text v-else class="input-label" :style="{ color: selectedAddress ? '#0B1F20' : '#999999' }">{{ selectedAddress || '请输入出发地(详细地址)' }}</text>
					</view>
				</view>
				<view class="cancel-btn" @click="goBack">取消</view>
			</view>
		</view>
		<!-- 当前地区 -->
		<view class="current-area">
			<view class="section-title">当前所在地区</view>
			<view class="location-item current-location" @click="selectCurrentLocation()">
				<image class="position-icon" src="/static/released/black-locat.png" mode="aspectFill"></image>

				<text>{{ currentLocation }}</text>
			</view>
		</view>
		<!-- 历史记录 -->
		<view class="history-section" v-if="historyLocations.length > 0">
			<view class="section-title">历史</view>
			<view class="history-list">
				<view class="history-item" v-for="(item, index) in historyLocations" :key="index" @click="selectHistoryItem(item)">
					{{ item.cityArea ? item.cityArea.name : item.name }}
				</view>
			</view>
		</view>

		<!-- 城市选择步骤 -->
		<view class="city-step" v-if="currentStep === 'city'">
			<!-- 城市搜索框 -->
			<view class="city-search-box" v-if="false">
				<u-search
					v-model="citySearchText"
					placeholder="请输入市县名称"
					:show-action="false"
					@search="handleCitySearch"
					@change="handleCitySearch"
					@clear="clearCitySearch"
					:searchIcon="''"
					:inputStyle="{ color: '#0B1F20' }"
				></u-search>
			</view>

			<!-- 城市搜索结果 -->
			<view class="city-search-result" v-if="citySearchText && citySearchResult.length > 0">
				<view class="section-title">搜索结果</view>
				<view class="city-item" v-for="(city, cityIndex) in citySearchResult" :key="cityIndex" @click="selectCity(city)">
					{{ city.name }}
				</view>
			</view>

			<!-- 手动输入确认按钮 -->
			<!-- <view class="manual-city-section" v-if="manualCity && !citySearchResult.length">
        <view class="section-title">手动输入</view>
        <view class="city-item" @click="confirmManualCity">
          {{ manualCity }}
        </view>
      </view> -->

			<!-- 无搜索结果提示 -->
			<view class="no-result" v-if="citySearchText && citySearchResult.length === 0">
				<u-empty mode="search" :icon="require('../../static/home/no-data.png')" text="暂无搜索结果" textColor="#999"></u-empty>
			</view>

			<!-- 字母索引列表 -->
			<view class="index-list" v-if="!citySearchText">
				<view class="alphabet-index">
					<view class="index-item has-data" v-for="letter in availableLetters" :key="letter" @click="scrollToLetter(letter)">
						{{ letter }}
					</view>
				</view>
				<scroll-view scroll-y class="city-list" :scroll-into-view="scrollIntoView" @scroll="handleScroll" :scroll-with-animation="true">
					<view v-for="(group, index) in cityData" :key="index" :id="'letter-' + group.letter" class="city-group">
						<view class="letter-header">{{ group.letter }}</view>
						<view class="city-item" v-for="(city, cityIndex) in group.locations" :key="cityIndex" @click="selectCity(city)">{{ city.name }}</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 地址搜索步骤 -->
		<view class="address-step" v-if="currentStep === 'address'">
			<view class="search-box" v-if="false">
				<u-search
					v-model="searchText"
					placeholder="请输入详细地址"
					:show-action="false"
					@search="handleAddressSearch"
					@change="handleAddressSearch"
					@clear="clearSearch"
					:searchIcon="''"
					:inputStyle="{ color: '#0B1F20' }"
				>
					<template #label>
						<span class="search-prefix">{{ selectedCity }} |</span>
					</template>
				</u-search>
			</view>

			<!-- 搜索建议 -->
			<view class="search-suggestions" v-if="searchSuggestions.length > 0">
				<view class="suggestion-item" v-for="(item, index) in searchSuggestions" :key="index" @click="selectAddress(item)">
					<image class="location-icon" src="/static/location.png" mode="aspectFill"></image>
					<view class="suggestion-content">
						<text class="suggestion-title">{{ item.title }}</text>
						<text class="suggestion-address">{{ item.address }}</text>
					</view>
				</view>
			</view>

			<!-- 手动输入确认按钮 -->
			<view class="manual-input-section" v-if="false">
				<view class="manual-input-item" @click="confirmManualAddress">
					<image class="location-icon" src="/static/location.png" mode="aspectFill"></image>
					<view class="suggestion-content">
						<text class="suggestion-title">{{ manualAddress }}</text>
						<text class="suggestion-address">手动输入的地址</text>
					</view>
				</view>
			</view>

			<!-- 无结果提示 -->
			<view class="no-result" v-if="searchText && searchSuggestions.length === 0">
				<u-empty mode="search" :icon="require('../../static/home/no-data.png')" text="暂无搜索结果" textColor="#999"></u-empty>
			</view>
		</view>

		<!-- 提示弹窗 -->
		<view class="alert-popup" v-if="showAlert">
			<view class="alert-content">
				<view class="alert-title">提示</view>
				<view class="alert-message">{{ alertMessage }}</view>
				<view class="alert-btn" @click="hideAlert">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
import config from '@/config';

export default {
	data() {
		return {
			currentLocation: '定位中...', // 默认当前地区
			currentStep: 'city', // 'city' 或 'address'
			selectedCity: '',
			selectedAddress: '',
			searchText: '',
			searchSuggestions: [],
			historyLocations: [],
			cityData: [],
			scrollIntoView: '',
			alphabetList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			showAlert: false,
			alertMessage: '',
			selectedLocation: null,
			currentTabType: null,
			citySearchText: '', // 新增：城市搜索关键词
			citySearchResult: [], // 新增：城市搜索结果
			citySearchTimer: null, // 新增：城市搜索防抖定时器
			addressSearchTimer: null, // 新增：地址搜索防抖定时器
			manualAddress: '', // 新增：手动输入的地址
			isAddressFocused: false, // 新增：地址输入框是否聚焦
			manualCity: '', // 新增：手动输入的市县
			isCityFocused: false // 新增：市县输入框是否聚焦
		};
	},
	computed: {
		// 过滤出有数据的字母
		availableLetters() {
			// 确保 cityData 是数组
			if (!Array.isArray(this.cityData)) {
				return [];
			}
			return this.alphabetList.filter((letter) => this.cityData.some((group) => group.letter === letter));
		}
	},
	onLoad(options) {
		this.currentTabType = options && options.activeTab;
		this.loadCityData();
		this.loadHistory();
		// 配置微信签名
		this.initWeixinConfig();
	},
	onUnload() {
		// 清理定时器
		if (this.citySearchTimer) {
			clearTimeout(this.citySearchTimer);
		}
		if (this.addressSearchTimer) {
			clearTimeout(this.addressSearchTimer);
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		// 检测是否是微信环境
		isWeiXin() {
			return /micromessenger/i.test(navigator.userAgent);
		},
		// 初始化微信配置
		initWeixinConfig() {
			if (this.isWeiXin()) {
				this.getWeixinSignature();
			} else {
				uni.showToast({
					title: '配置微信config----当前环境不是微信环境',
					icon: 'none',
					duration: 5000
				});
			}
		},
		// 调用接口获取微信签名
		async getWeixinSignature() {
			try {
				const signUrl = this.platform === 'ios' ? uni.getStorageSync('firstIosUrl') : window.location.href.split('#')[0];
				const params = {
					url: signUrl
				};
				const res = await this.$http.post('/h5/wechat/getSignPackage', params);
				wx.config({
					debug: false,
					appId: res.data.appId,
					nonceStr: res.data.nonceStr,
					rawString: res.data.rawString,
					timestamp: res.data.timestamp,
					signature: res.data.signature,
					jsApiList: ['getLocation']
				});
				wx.ready(() => {
					this.localtionDo();
				});
			} catch (error) {}
		},
		localtionDo(flag = false) {
			wx.getLocation({
				type: 'gcj02',
				isHighAccuracy: true, // 开启高精度定位
				highAccuracyExpireTime: 3000, // 高精度定位超时时间（毫秒）
				success: (res) => {
					const longitude = res.longitude;
					const latitude = res.latitude;
					this.requestLocation(longitude, latitude, flag);
				},
				fail: (res) => {
					this.currentLocation = '定位失败';
				},
				complete: (res) => {
					if (res.errMsg !== 'getLocation:ok') {
						this.currentLocation = '定位失败';
					}
				}
			});
		},
		selectCurrentLocation() {
			this.getCurrentLocation(true);

			for (var index = 0; index < this.cityData.length; index++) {
				var element = this.cityData[index];

				for (var eIndex = 0; eIndex < element.locations.length; eIndex++) {
					var el = element.locations[eIndex];

					if (this.currentLocation == el.name) return this.selectCity(el);
				}
			}
		},
		// 获取当前位置
		getCurrentLocation(flag) {
			uni.showLoading({
				title: '定位中...'
			});
			this.localtionDo(flag);

			uni.hideLoading();
		},
		//发送请求坐标反解析
		requestLocation(longitude, latitude, flag) {
			uni.request({
				url: 'https://restapi.amap.com/v3/geocode/regeo',
				method: 'GET',
				data: {
					key: config.mapKey,
					location: `${longitude},${latitude}`,
					output: 'JSON'
				},
				success: (res) => {
					if (res.data.infocode === '10000') {
						// 地址组成信息
						const addressComponent = res.data.regeocode.addressComponent;
						// 完整地址
						const address = res.data.regeocode.formatted_address;
						this.currentLocation = addressComponent.city;
						// this.manualCity = addressComponent.city;
						// this.selectedCity = addressComponent.city;
						// this.searchText = addressComponent.city;
						// if (flag) {
						//   this.switchToAddressStep();
						//   this.handleAddressSearch();
						// }
					} else {
						uni.showToast({
							title: `定位失败：${res.errMsg}`,
							icon: 'none'
						});
						this.currentLocation = '定位失败';
					}
				}
			});
		},
		// 切换到城市选择步骤
		switchToCityStep() {
			this.currentStep = 'city';
			this.searchText = '';
			this.searchSuggestions = [];
			this.citySearchText = ''; // 切换时清空搜索关键词
			this.citySearchResult = []; // 切换时清空搜索结果
			this.manualCity = this.selectedCity || ''; // 初始化手动输入框的值
			this.isCityFocused = false; // 切换时取消聚焦
		},

		// 切换到地址输入步骤
		switchToAddressStep() {
			if (!this.selectedCity) {
				uni.showModal({
					title: '提示',
					content: '请先在下方选择市或县',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
						}
					}
				});
				return;
			}
			this.currentStep = 'address';
			this.manualAddress = this.selectedAddress || ''; // 初始化手动输入框的值
		},

		// 显示提示信息
		showAlertMessage(message) {
			this.alertMessage = message;
			this.showAlert = true;
		},

		// 隐藏提示
		hideAlert() {
			this.showAlert = false;
		},

		// 加载城市数据
		async loadCityData() {
			uni.showLoading({
				title: '数据加载中...',
				duration: 3000,
				mask: true
			});

			let params = {
				levels: this.currentTabType === 'city' ? [2] : [2, 3] // 城际[2] 城乡[2,3]
			};

			try {
				const data = await this.$http.post('/h5/common/areasByLevel', params);

				// 确保数据是数组格式
				if (Array.isArray(data.data)) {
					this.cityData = data.data;
				} else if (data.data && typeof data.data === 'object') {
					// 如果是对象，转换为数组
					this.cityData = Object.values(data.data);
				} else {
					this.cityData = [];
				}

				uni.hideLoading();
			} catch (error) {
				this.cityData = [];
				uni.hideLoading();
				uni.showToast({
					title: '数据加载失败',
					icon: 'none'
				});
			}
		},

		// 加载历史记录
		async loadHistory() {
			if (!uni.getStorageSync('userInfo') || !uni.getStorageSync('userInfo').id) {
				return;
			}

			try {
				const data = await this.$http.get('/h5/line/getCityAreaSearchHistory');
				this.historyLocations = data.data.slice(0, 3);
			} catch (error) {}
		},

		// 滚动到指定字母
		scrollToLetter(letter) {
			// 确保 cityData 是数组
			if (!Array.isArray(this.cityData)) {
				return;
			}

			// 检查是否存在对应的字母分组
			const hasLetter = this.cityData.some((group) => group.letter === letter);

			if (!hasLetter) {
				return;
			}

			// 先清空，然后在下一个 tick 中设置，确保滚动生效
			this.scrollIntoView = '';
			this.$nextTick(() => {
				setTimeout(() => {
					this.scrollIntoView = 'letter-' + letter;
				}, 50); // 添加小延迟确保 DOM 完全更新
			});
		},

		// 处理滚动事件
		handleScroll(e) {
			// 可以根据滚动位置计算当前字母
		},

		// 选择城市
		selectCity(city) {
			this.searchText = this.manualCity;

			this.selectedCity = city.name;
			this.manualCity = city.name; // 更新手动输入框的值
			this.selectedLocation = {
				city: city,
				address: ''
			};
			this.switchToAddressStep();
			this.handleAddressSearch();
		},

		// 选择历史记录项
		selectHistoryItem(item) {
			this.selectedCity = item.cityArea ? item.cityArea.name : item.name;
			this.searchText = this.selectedCity;
			this.selectedLocation = {
				city: item.cityArea || item,
				address: ''
			};
			this.switchToAddressStep();
			this.handleAddressSearch();
		},

		// 处理地址搜索
		async handleAddressSearch() {
			console.log(this.searchText, '1this.searchText');
			console.log(this.selectedCity, '1this.selectedCity');

			// 清除之前的定时器
			if (this.addressSearchTimer) {
				clearTimeout(this.addressSearchTimer);
			}

			// 设置防抖，300ms后执行搜索
			this.addressSearchTimer = setTimeout(async () => {
				if (!this.searchText.trim()) {
					this.searchSuggestions = [];
					return;
				}

				try {
					// 调用地图API进行地址联想
					const suggestions = await this.getAddressSuggestions(this.searchText, this.selectedCity);
					console.log(suggestions, '地址联想结果');

					this.searchSuggestions = suggestions;
				} catch (error) {
					console.log('地址搜索失败', error);
					this.searchSuggestions = [];
				}
			}, 300);
		},

		// 获取地址建议
		async getAddressSuggestions(keyword, city) {
			console.log(keyword, city, '获取地址建议');

			// 调用高德地图地址联想接口
			try {
				const response = await uni.request({
					url: 'https://restapi.amap.com/v3/place/text',
					method: 'GET',
					data: {
						key: config.mapKey,
						keywords: keyword,
						city: city,
						output: 'JSON',
						offset: 20,
						page: 1
					}
				});

				// uni-app 的 uni.request 返回的是 [err, res] 结构
				const [err, res] = response;

				if (err) {
					return [];
				}

				if (res && res.data && res.data.infocode === '10000') {
					return res.data.pois.map((poi) => ({
						title: poi.name,
						address: poi.address,
						location: poi.location,
						id: poi.id
					}));
				}

				console.log('API返回异常', res);
				return [];
			} catch (error) {
				console.log('地址联想失败', error);
				return [];
			}
		},

		// 选择地址
		selectAddress(address) {
			console.log(address, '*********');

			this.selectedAddress = address.title;
			this.manualAddress = address.title; // 更新手动输入框的值
			this.selectedLocation.address = address;

			// 保存到历史记录
			this.saveToHistory();

			// 返回结果给上级页面
			this.returnResult();
		},

		// 保存到历史记录
		async saveToHistory() {
			if (!uni.getStorageSync('userInfo') || !uni.getStorageSync('userInfo').id) {
				return;
			}

			try {
				const params = {
					area_id: this.selectedLocation.city.id,
					uid: uni.getStorageSync('userInfo').id
				};
				await this.$http.post('/h5/line/saveCityAreaSearchHistory', params);
			} catch (error) {}
		},

		// 返回结果
		returnResult() {
			const result = {
				city: this.selectedLocation.city,
				address: this.selectedLocation.address,
				fullAddress: this.selectedCity + '.' + this.selectedAddress,
				name: this.selectedCity + '.' + this.selectedAddress
			};

			// 通过事件传递结果
			uni.$emit('locationSelected', result);
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/released/index'
				});
			}, 500);
		},

		// 清除城市搜索
		clearCitySearch() {
			this.citySearchText = '';
			this.citySearchResult = [];
			if (this.citySearchTimer) {
				clearTimeout(this.citySearchTimer);
			}
		},

		// 清除搜索
		clearSearch() {
			this.searchText = '';
			this.searchSuggestions = [];
			if (this.addressSearchTimer) {
				clearTimeout(this.addressSearchTimer);
			}
		},

		// 处理城市搜索
		async handleCitySearch() {
			// 清除之前的定时器
			if (this.citySearchTimer) {
				clearTimeout(this.citySearchTimer);
			}

			// 设置防抖，300ms后执行搜索
			this.citySearchTimer = setTimeout(async () => {
				if (!this.citySearchText.trim()) {
					this.citySearchResult = [];
					return;
				}

				const keyword = this.citySearchText.trim().toLowerCase();
				const result = [];

				// 首先在本地数据中搜索
				if (Array.isArray(this.cityData)) {
					this.cityData.forEach((group) => {
						if (group.locations && Array.isArray(group.locations)) {
							group.locations.forEach((city) => {
								if (city.name && city.name.toLowerCase().includes(keyword)) {
									result.push(city);
								}
							});
						}
					});
				}

				// // 如果本地搜索结果不够，再调用API搜索
				// if (result.length < 10) {
				//   try {
				//     const apiSuggestions = await this.getCitySuggestions(this.citySearchText);
				//     // 合并结果，去重
				//     const existingNames = new Set(result.map(item => item.name));
				//     apiSuggestions.forEach(item => {
				//       if (!existingNames.has(item.name)) {
				//         result.push(item);
				//       }
				//     });
				//   } catch (error) {
				//     console.log('API城市搜索失败', error);
				//   }
				// }

				this.citySearchResult = result.slice(0, 20); // 限制结果数量
			}, 300);
		},

		// 获取城市建议
		// async getCitySuggestions(keyword) {
		//   try {
		//     const response = await uni.request({
		//       url: 'https://restapi.amap.com/v3/place/text',
		//       method: 'GET',
		//       data: {
		//         key: config.mapKey,
		//         keywords: keyword,
		//         city: '', // 不限制城市，让高德地图联想全国
		//         output: 'JSON',
		//         offset: 20,
		//         page: 1,
		//         types: '190000' // 限制为城市类型
		//       }
		//     });

		//     // uni-app 的 uni.request 返回的是 [err, res] 结构
		//     const [err, res] = response;

		//     if (err) {
		//       console.log('城市请求失败', err);
		//       return [];
		//     }

		//     if (res && res.data && res.data.infocode === "10000") {
		//       return res.data.pois.map(poi => ({
		//         name: poi.name,
		//         id: poi.id,
		//         address: poi.address
		//       }));
		//     }

		//     console.log('城市API返回异常', res);
		//     return [];
		//   } catch (error) {
		//     console.log('城市联想失败', error);
		//     return [];
		//   }
		// },

		// 处理手动输入的地址
		handleManualInput(e) {
			this.manualAddress = e.detail.value;
			this.searchText = this.manualAddress; // 将手动输入的地址作为搜索文本
			this.isAddressFocused = true; // 标记地址输入框已聚焦

			// 触发地址搜索
			this.handleAddressSearch();
		},

		// 处理地址输入框聚焦
		handleAddressFocus() {
			this.isAddressFocused = true;
		},

		// 处理地址输入框失焦
		handleAddressBlur() {
			this.isAddressFocused = false;
		},

		// 确认手动输入的地址
		confirmManualAddress() {
			if (!this.manualAddress.trim()) {
				this.showAlertMessage('请输入有效的地址');
				return;
			}

			this.selectedAddress = this.manualAddress.trim();
			this.selectedLocation = {
				city: this.selectedLocation.city,
				address: {
					title: this.manualAddress.trim(),
					address: this.manualAddress.trim(),
					location: '',
					id: 'manual_' + Date.now()
				}
			};

			// 保存到历史记录
			this.saveToHistory();

			// 返回结果给上级页面
			this.returnResult();
		},

		// 处理手动输入的市县
		handleManualCityInput(e) {
			this.manualCity = e.detail.value;
			this.citySearchText = this.manualCity; // 将手动输入的市县作为搜索文本
			this.isCityFocused = true; // 标记市县输入框已聚焦

			// 触发城市搜索
			this.handleCitySearch();
		},

		// 处理市县输入框聚焦
		handleCityFocus() {
			this.isCityFocused = true;
		},

		// 处理市县输入框失焦
		handleCityBlur() {
			this.isCityFocused = false;
		},

		// 确认手动输入的城市
		confirmManualCity() {
			if (!this.manualCity.trim()) {
				this.showAlertMessage('请输入有效的市县名称');
				return;
			}

			this.selectedCity = this.manualCity.trim();
			this.selectedLocation = {
				city: {
					name: this.manualCity.trim(),
					id: 'manual_city_' + Date.now(),
					address: this.manualCity.trim()
				},
				address: ''
			};

			this.switchToAddressStep();
		}
	}
};
</script>

<style lang="scss" scoped>
.location-picker-enhanced {
	background-color: #fff;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 24rpx;
	border-bottom: 1rpx solid #f0f0f0;

	.header-left {
		.back-icon {
			font-size: 40rpx;
			color: #333;
		}
	}

	.header-center {
		display: flex;
		flex-direction: column;
		align-items: center;

		.app-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}

		.app-url {
			font-size: 24rpx;
			color: #999;
			margin-top: 4rpx;
		}
	}

	.header-right {
		.more-icon {
			font-size: 32rpx;
			color: #333;
		}
	}
}

.current-area {
	padding: 0 24rpx 24rpx;

	.section-title {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.location-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 2rpx solid #eeeeee;

		.position-icon {
			width: 32rpx;
			height: 32rpx;
		}

		text {
			margin-left: 10rpx;
		}

		.location-icon {
			width: 40rpx;
			height: 40rpx;
		}

		.result-text {
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			font-size: 32rpx;
			color: #0b1f20;
		}
	}

	.current-location {
		border: none;
		width: 160rpx;
		height: 64rpx;
		line-height: 64rpx;
		display: flex;
		justify-content: center;
		background: #f5f5f6;
		border-radius: 16rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		font-size: 28rpx;
		padding: 0;
		color: #0b1f20;
	}
}

.search-section {
	padding: 24rpx;

	.search-inputs {
		display: flex;
		align-items: center;
		gap: 20rpx;

		.input-group {
			flex: 1;
			display: flex;
			// flex-direction: column;
			// gap: 16rpx;

			.input-field {
				height: 80rpx;
				background: #f5f5f6;
				display: flex;
				align-items: center;
				border: 2rpx solid transparent;

				&:first-child {
					border-radius: 36rpx 0 0 36rpx;
					padding-left: 20rpx;
					width: 30%;
					// 超出部分...
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					border-right: 2rpx solid #0b1f20;
				}

				&:last-child {
					border-radius: 0 36rpx 36rpx 0;
					padding-right: 20rpx;
					padding-left: 10rpx;
					width: 70%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				&.active {
					background: #f5f5f6;
				}

				.input-label {
					font-size: 28rpx;
					color: #0b1f20;
				}

				.city-input {
					flex: 1;
					font-size: 28rpx;
					color: #0b1f20;
					padding: 0;
					height: 100%;
					box-sizing: border-box;
					background: transparent;
					border: none;
					outline: none;
				}

				.address-input {
					flex: 1;
					font-size: 28rpx;
					color: #0b1f20;
					padding: 0;
					height: 100%;
					box-sizing: border-box;
					background: transparent;
					border: none;
					outline: none;
				}
			}
		}

		.cancel-btn {
			padding: 20rpx 0rpx;
			font-size: 28rpx;
			color: #0b1f20;
		}
	}
}

.history-section {
	padding: 0 24rpx 24rpx;

	.section-title {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.history-list {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;

		.history-item {
			padding: 16rpx 24rpx;
			background: #f5f5f6;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: #333;
		}
	}
}

.city-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;

	.city-search-box {
		padding: 24rpx;
		margin-bottom: 24rpx;
	}

	.city-search-result {
		padding: 0 24rpx 24rpx;

		.section-title {
			font-size: 28rpx;
			color: #999;
			margin-bottom: 20rpx;
		}

		.city-item {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			font-size: 32rpx;
			color: #333;
		}
	}

	.manual-city-section {
		padding: 0 24rpx 24rpx;

		.section-title {
			font-size: 28rpx;
			color: #999;
			margin-bottom: 20rpx;
		}

		.city-item {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			font-size: 32rpx;
			color: #333;
		}
	}

	.index-list {
		flex: 1;
		display: flex;
		position: relative;

		.alphabet-index {
			width: 60rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx 0;
			background: rgba(255, 255, 255, 0.9);
			position: fixed;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			z-index: 100;
			border-radius: 20rpx 0 0 20rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

			.index-item {
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #666;
				margin: 4rpx 0;
				cursor: pointer;
				transition: all 0.2s ease;

				&:active {
					color: #ff7937;
					background: rgba(0, 122, 255, 0.1);
					border-radius: 50%;
				}

				// &.has-data {
				//   color: #FF7937;
				// }

				&:not(.has-data) {
					color: #ccc;
				}
			}
		}

		.city-list {
			flex: 1;
			padding-right: 60rpx;
			height: calc(100vh - 400rpx); // 设置固定高度，确保可以滚动

			.city-group {
				background-color: #fff;

				.letter-header {
					padding: 16rpx 24rpx;
					background: #f5f5f6;
					font-size: 28rpx;
					color: #999;
					font-weight: bold;
				}

				.city-item {
					padding: 20rpx 24rpx;
					border-bottom: 1rpx solid #f0f0f0;
					font-size: 32rpx;
					color: #333;
				}
			}
		}
	}
}

.address-step {
	flex: 1;
	padding: 24rpx;
	background-color: #fff;

	.search-box {
		margin-bottom: 24rpx;

		.search-prefix {
			font-size: 28rpx;
			color: #666;
			margin-right: 10rpx;
		}
	}

	.search-suggestions {
		.suggestion-item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f0f0f0;

			.location-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}

			.suggestion-content {
				flex: 1;
				display: flex;
				flex-direction: column;

				.suggestion-title {
					font-size: 32rpx;
					color: #333;
					margin-bottom: 8rpx;
				}

				.suggestion-address {
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}

	.manual-input-section {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;

		.manual-input-item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;

			.location-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}

			.suggestion-content {
				flex: 1;
				display: flex;
				flex-direction: column;

				.suggestion-title {
					font-size: 32rpx;
					color: #333;
					margin-bottom: 8rpx;
				}

				.suggestion-address {
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}

	.no-result {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;

		::v-deep .u-empty__text {
			font-size: 32rpx;
			color: #999999;
		}

		::v-deep .u-empty__image {
			width: 120rpx;
			height: 120rpx;
		}
	}
}

.alert-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;

	.alert-content {
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx;
		margin: 0 60rpx;
		text-align: center;

		.alert-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}

		.alert-message {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 30rpx;
			line-height: 1.5;
		}

		.alert-btn {
			padding: 20rpx 40rpx;
			background: #007aff;
			color: #fff;
			border-radius: 12rpx;
			font-size: 32rpx;
		}
	}
}
</style>
